<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6 lt8"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7 lt8"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8 lt8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="UTF-8" />
        <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  -->
        <title>phonemap</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <meta name="description" content="Login and Registration Form with HTML5 and CSS3" />
        <meta name="keywords" content="html5, css3, form, switch, animation, :target, pseudo-class" />
        <meta name="author" content="Codrops" />
        <link rel="shortcut icon" href="../favicon.ico"> 
        <link rel="stylesheet" type="text/css" href="login/css/demo.css" />
        <link rel="stylesheet" type="text/css" href="login/css/style.css" />
		<link rel="stylesheet" type="text/css" href="login/css/animate-custom.css" />
		<script type="text/javascript" src='script/login.js'></script>
		<script type="text/javascript" src='script/jquery-1.11.0.min.js'></script>
		<script type="text/javascript" src="script/jquery.cookie.js"></script>
		<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/md5.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
	
		        var remember = $.cookie('remember');
		        if (remember == 'true') 
		        {
		            var phone = $.cookie('phone');
		            var password = $.cookie('password');
		            // autofill the fields
		            $('#username').val(phone);
		            $('#password').val(password);
		            $('#loginkeeping').prop('checked', true);
		        }
	
	

		});
		</script>
    </head>
    <body>
        <div class="container">
            <header>
                <h1>phonemap.com </h1>
            </header>
            <section>				
                <div id="container_demo" >
                    <a class="hiddenanchor" id="tologin"></a>
                    <a class="hiddenanchor" id="toregister"></a>
                    <a class="hiddenanchor" id="tosuccess"></a>
                    <div id="wrapper">
                        <div id="login" class="animate form">
                            <form id="login-form" autocomplete="on"> 
                                <h1>Log in</h1> 
                                <p> 
                                    <label for="username" class="uname" data-icon="u" > Phone number</label>
                                    <input id="username" name="username" required="required" type="text" placeholder="phone number"/>
                                </p>
                                <p> 
                                    <label for="password" class="youpasswd" data-icon="p"> Password </label>
                                    <input id="password" name="password" required="required" type="password" placeholder="eg. X8df!90EO" /> 
                                </p>
                                <p class="keeplogin"> 
									<input type="checkbox" name="loginkeeping" id="loginkeeping" value="loginkeeping" /> 
									<label for="loginkeeping">Keep me logged in</label>
								</p>
                                <p class="login button"> 
                                    <input type="button" value="Login" onclick="login()"/> 
								</p>
								<p> 
                                    <label id="loginstatus" style="display:none;color:red;">Invalid Phone or password</label> 
								</p>
                                <p class="change_link">
									Not a member yet ?
									<a id="to_register" href="#toregister" class="to_register">Join us</a>
								</p>
                            </form>
                        </div>

                        <div id="register" class="animate form">
                            <form id="register-form" name="register-form" autocomplete="on" enctype="multipart/form-data"> 
                                <h1> Sign up </h1> 
                                <p> 
                                    <label for="usernamesignup" class="uname" data-icon="u">Phone number</label>
                                    <input id="usernamesignup" name="usernamesignup" required="required" type="tel" placeholder="0909347xxx" />
                                    <label id="usernamesignuperror" style="display:none;color:red;"></label>
                                </p>
                                <p> 
                                    <label for="emailsignup" class="youmail" data-icon="e" > Email</label>
                                    <input id="emailsignup" name="emailsignup" required="required" type="email" placeholder="mysupermail@mail.com"/>
                                    <label id="emailsignuperror" style="display:none;color:red;"></label> 
                                </p>
                                <p> 
                                    <label for="passwordsignup" class="youpasswd" data-icon="p">Password </label>
                                    <input id="passwordsignup" name="passwordsignup" required="required" type="password" placeholder="eg. X8df!90EO"/>
                                    <label id="passwordsignuperror" style="display:none;color:red;">Must be more than 6 characters</label>
                                </p>
                                <p> 
                                    <label for="passwordsignup_confirm" class="youpasswd" data-icon="p">Confirm password </label>
                                    <input id="passwordsignup_confirm" name="passwordsignup_confirm" required="required" type="password" placeholder="eg. X8df!90EO"/>
                                    <label id="passwordsignup_confirmerror" style="display:none;color:red;">Not the same password</label>
                                </p>
                                <p class="signin button"> 
									<input type="button" value="Sign up" onclick="formValidate()"/> 
								</p>
                                <p class="change_link">  
									Already a member ?
									<a href="#tologin" class="to_register"> Go and log in </a>
								</p>
                            </form>
                        </div>
                        <div id="success" class="animate form">
                        	<form action="" autocomplete="on">
                        		<h3>Success</h3>
                        		<p>Welcome phonemap, hopefully you will enjoy it</p>
                        		<p class="change_link">  
									
									<a href="#tologin" class="to_register"> Go and log in </a>
								</p>
                        	</form>
                        </div>
						
                    </div>
                </div>  
            </section>
        </div>
    </body>
</html>